<template>
    <div>
        <Modal v-model="data.isShow" :mask-closable="false" width="460">
            <p slot="header" class="header">
                <span>等待支付</span>
            </p>
            <div class="main-view">
                <div style="display: flex;">
                    <div class="authCode-view">
                        <Button type="primary" @click="clickAuthCode">使用扫码枪付款</Button>
                        
                    </div>
                    <div class="qrcode-view">
                        <Button type="primary" @click="clickQrcode">用户扫码付款</Button>
                    </div>
                </div>
                <div class="auth-input" v-if="isAuthShow">
                    <Input v-model="value" placeholder="请确定输入框是否聚焦" class="input" :autofocus="toggle"></Input>
                    <Button type="primary" @click="authcode">确定</Button>
                </div>
            </div>
            <div slot="footer">
                <Button @click="data.isShow = false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script> 
    export default {
        props: ['data'],
        data() {
            return {
                value: '',
                isAuthShow: false,
                toggle: false
            }
        },
        mounted () {
            
        },
        methods: {  
            clickAuthCode() {
                this.isAuthShow = true;
                this.toggle = true;
            },
            clickQrcode() {
                this.isAuthShow = false;
                this.toggle = false;
                this.$emit('on-qrcode')
            },

            authcode() {
                this.$emit('on-action', this.value);
            }
        },  
    }
</script>

<style scoped lang="less">
.main-view {
    .authCode-view {
        flex: 1;
        text-align: center;
    }
    .qrcode-view {
        flex: 1;
        text-align: center;
    }
    .input {
        width: 3rem;
        border: .01rem solid #D5CED2;
        border-radius: 5px;
        color: #433e41;
        height: 32px;
    }
    .auth-input {
        margin-top: .2rem;
        text-align: center;
    }
}
</style>